<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
    <style>
        * {
            margin: 0;padding: 0;
        }
        canvas {
            box-shadow: 1px 1px 1px gray;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500">您的浏览器不支持canvas显示，请使用其他浏览器</canvas>

</body>
<script>
    var canvas=document.querySelector('canvas');
    var ctx=canvas.getContext('2d');
    
    var sw = window.innerWidth;
	var sh = window.innerHeight;
	canvas.width = sw;
	canvas.height = sh;
    
    function rand(min,max) {
		return Math.round(Math.random()*(max - min)) + min;
	}
    function rc() {
		var r = rand(0,255);
		var g = rand(0,255);
		var b = rand(0,255);
		return "rgb("+r+","+g+","+b+")";
	}
    var color=rc();
    
    var text="冷冷清清凄凄惨惨戚戚";
    ctx.font="200px 华文行楷";
    var gradient=ctx.createLinearGradient(0,0,800,800);
    gradient.addColorStop("0","tomato");
    gradient.addColorStop("0.2","cyan");
    gradient.addColorStop("0.4","purple");
    gradient.addColorStop("0.6","blue");
    gradient.addColorStop("0.8","yellow");
    gradient.addColorStop("1","red");
    ctx.strokeWidth=100;
    ctx.fillStyle=gradient;
    ctx.strokeStyle=gradient;
    ctx.textBaseline="top";
    //四个参数 1内容2起点x3起点y 4最大长度
    ctx.strokeText(text,0,0,800);
    ctx.fillText(text,0,0,800)
    
    </script>
</html>










